<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      // import { createApp } from '/node_modules/vue/dist/vue.esm-browser.js'
      import {
        reactive,
        effect,
        ref
      } from "/packages/reactivity/dist/reactivity.esm.js";
      // createApp({
      //   data() {
      //     return {
      //       message: 'Hello Vue!'
      //     }
      //   },
      //   template: '<div>{{ message }}</div>'
      // }).mount('#app')


      let name = ref("lxh");
      let age = ref(31);
      let num = 0
      effect(() => {
        console.log(++num + "次更新");
        app.innerHTML = name.value + "今年" + age.value + "岁了";
      }
      // ,{
      //   scheduler: () => {
      //     console.log("调度器执行了");
      //   }
      // }
    );

      setTimeout(() => {
        console.log("2秒后");

        name.value = "LSW";
        age.value = 32;
      }, 2000);

    </script>
  </body>
</html>
